<template>
  <div class="d-relative pointer">
    <div
      ref="table"
      :style="{ opacity, zIndex, transform: 'scale(' + scale + ')' }"
      class="d-absolute chart-table"
      @click="hiddenTable"
    >
      <a-table
        :scroll="{ y: 400 }"
        bordered
        :pagination="false"
        :row-key="
          (record, index) => {
            return index
          }
        "
        :columns="columnsData"
        :data-source="tableData"
      />
    </div>

    <div :id="id" ref="column" class="pointer" :style="{ height, padding }" />
  </div>
</template>
<script>
import { Column } from '@antv/g2plot'
import mixins from './mixin'
export default {
  mixins: [mixins],
  props: {
    dragId: {
      type: String,
      default: 'sda09898872'
    },
    padding: {
      type: String,
      default: '12px'
    },
    height: {
      type: String,
      default: '400px'
    },
    data: {
      type: Array,
      default: () => []
    },
    x: {
      type: String,
      default: 'label'
    },
    y: {
      type: String,
      default: 'value'
    },
    type: {
      type: String,
      default: 'type'
    }
  },
  data() {
    return {
      stackedColumnPlot: null
    }
  },
  watch: {
    data: {
      handler() {
        this.columnsData = []
        this.tableData = []
        const type = [
          ...new Set(
            this.data.map(_ => {
              return _[this.type]
            })
          )
        ]
        console.log(type)
        type.forEach(t => {
          const obj = {}
          this.data.forEach((_, i) => {
            obj.序列 = t
            _[this.type] === t && (obj[_[this.x]] = _[this.y])
          })
          this.tableData.push(obj)
        })
        if (this.tableData[0]) {
          Object.keys(this.tableData[0]).forEach(_ => {
            this.columnsData.push({
              title: _,
              dataIndex: _,
              key: _
            })
          })
        }
        this.reset()
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart()
    this.$emit('hock:beforeDestroy', () => {
      this.stackedColumnPlot.destroy()
    })
  },
  methods: {
    renderChart() {
      this.stackedColumnPlot = new Column(this.id, {
        data: this.data,
        isGroup: true,
        height: this.height,
        autoFit: true,
        marginRatio: 0,
        xField: this.x,
        yField: this.y,
        legend: {
          position: 'bottom' // 'top', 'bottom', 'middle'
        },
        seriesField: this.type,
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' }
          ]
        }
      })
      this.stackedColumnPlot.on('click', ev => {
        if (
          ev.gEvent.target.cfg.name !== 'legend-item-name' &&
          ev.gEvent.target.cfg.name !== 'legend-item-marker'
        ) {
          this.showTable()
        }
        this.$emit('onClick', ev)
      })
    },

    reset() {
      this.$nextTick(() => {
        this.stackedColumnPlot.options.data = [...this.data]
        this.stackedColumnPlot.render()
      })
    }
  }
}
</script>
<style scoped>
.chart-table {
  transition: all 1.5s;
  z-index: -1;
  transform: scle(0.4);
  height: 100%;
  background: #fff;
}
/deep/ .g2-tooltip-value {
  font-family: GaramondFont;
  font-size: 16px;
}
</style>
